<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件受控与非受控</title>
    </head>
    <body>
        <div id="example"></div>
        <!--引入react核心库-->
        <script type="text/javascript" src="../js/react.development.js"></script>
        <!--引入操作react操作DOM库-->
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <!--引入babel-->
        <script type="text/javascript" src="../js/babel.min.js"></script>
        <script type="text/babel">
          class Login extends React.Component{
              state = {password:'123456'}
              clickHandler = (e)=>{
                  console.log(e)
                  e.preventDefault()
                  let {userame} = this
                  let {password} = this.state
                  alert(`您输入的用户名是${username.value},密码是${password}`)
              }
              changeHandler = (e) =>{
                  this.setState({password:e.target.value})
              }
              render() {
                  return (
                      <form action="https://www.baibaibaidu.com">
                          用户名 <input type="text" ref={(input)=>{this.username = input}}/>
                          密码 <input type="text" onChange={this.changeHandler} value={this.state.password}/>
                          <button onClick={this.clickHandler}>登陆</button>
                      </form>
                  )
              }
          }
          ReactDOM.render(<Login/>,document.getElementById('example'))
        </script>
    </body>
</html>